import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,Tabs,SearchBar,Carousel } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull,handleOSS } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
import { Row, Col } from 'antd';
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
@connect(() => {
  return ({

  })
})
export default class categoryPage2 extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      TabData:[],
      TabDataList:[],
      aa:[],
      goodsItem:[]
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    console.log(location.search)
    const query = location.search;
    console.log(query)
    const arr = query.split('&') // ['?s=', 'f=7']
    const code = arr[0].substr(6) // '1'
    const name = arr[1].substr(5) // '7'
    console.log(code,name)
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: decodeURI(name),
        path: location.pathname + location.search
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=new_category_list_show_node",
          params: [
            {
              "key":"parent_id",
              "value":code
            }
          ],
          _c: "new_category_list_show_node"
        },
        callback: (result) => {
          let { data } = result;


          var result =[];
          for(var i=0;i<data.length;i+=4){
            result.push(data.slice(i,i+4))
          }
          console.log(result)
          this.setState({
            TabData:data,
            TabDataList:result
          })

        }
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=app_category_goods_list_search",
          params: [
            {
              "key":"category_id",
              "value":code
            }
          ],
          _c: "app_category_goods_list_search"
        },
        callback: (result) => {
          let { data } = result;
          this.setState({
            goodsItem:data,
          })


          console.log(data);

        }
      }
    });

  }
  goodList() {
    let { goodsItem} = this.state;


    if (!goodsItem || goodsItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T(localeData[localStorage.locale].goodsDetailCartNoGood)}
        </div>
      )
    }
    else {
      let contents = [];
      return (
        <div className="box" style={{paddingBottom:'0%'}}>
          {goodsItem.map((i,k) => (
            <div  key={k} style={{background:'#fff',fontWeight:'bold',padding:'5% 5% 5%',borderRadius:'10px'}} className="item">
              <div onClick={(e)=>{this.handleDetail(e,i)}}>
                <img src={handleOSS(i.img_url)} style={{width:'100%',height:'100%'}}/>

              </div>
              <div style={{overflow:'hidden'}}>
                <p className="ellipsis2" style={{margin:'12px 0px 0px',textAlign:'left',color:'#595867',fontSize:'13px',height:'35px'}}>{i.goods_name}</p>
                <div style={{float:'left',color:'#F09600',fontSize:'15px',marginTop:'5px'}}>€{i.price}</div>
                <div style={{float:'right',width:'34px',height:'34px'}} onClick={(e) => {this.handleAdd(e,i) }}>
                  <img src="image/cart1.png" style={{width:'32px',height:'32px'}}/>
                </div>
              </div>

              {/*<Button type="primary" size="small" inline style={{marginBottom:'1em'}} onClick={(e) => {this.handleAdd(e,i) }}>+ADD</Button>*/}
            </div>

          ))}
        </div>

      )
    }
  }
  onChange= (value) => {
    this.setState({ value });
  };
  submit=()=>{
    let {dispatch,location} = this.props;
    let {value,loading} = this.state;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=app_search_goods_list",
          params: [
            {
              key: "keyword",
              value: value
            },
          ],
          _c: "app_search_goods_list"
        },
        callback: (result) => {
          let { data } = result;
          let {loading} = this.state;
          this.setState({
            goodsItem:data,
            loading:false,
          })

          console.log(data)

        }
      }
    });
  }
  handleDetail=(e,i)=>{
    let {dispatch} = this.props;
    goToPage({ dispatch, config: { url: "/goodsDetail?id="+i.id+"&store_id="+i.store_id }, isReplace: false })
  }
  handleAdd=(e,i)=>{
    // console.log(i);
    let {dispatch} = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/add",
          params: [
            {
              key: "goods_id",
              value: i.id
            },
            {
              key: "goods_name",
              value: i.goods_name
            },
            {
              key: "img_url",
              value: i.img_url
            },
            {
              key: "price",
              value: i.price
            },
            {
              key: "quantity",
              value: 1
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          MToast.info(T(localeData[localStorage.locale].goodsDetailCartInfo,3, null, false));

        }
      }
    })
  }
  render(){
    let {dispatch} = this.props;
    let {TabData,TabDataList} = this.state;
    const messages = localeData[localStorage.locale]
    return(
      <IntlProvider
        locale={ this.state.locale } messages={messages}
      >
      <div style={{background:'#F6F6FC',width:'100%',height:'100%'}}>
        <div style={{paddingTop:'45px',}}> <SearchBar
          placeholder={messages.search}
          maxLength={200}
          onChange={this.onChange}
          onSubmit={value => this.submit(value)}
        /></div>
        <div style={{height:'87%',overflowY:'auto'}}>
          {this.goodList()}
        </div>
      </div>
      </IntlProvider>
    )
  }
}
